function renderDot(imgData, x, y, rgbArray) {
    var offset = getOffset(imgData, x, y);
    imgData.data[offset] = rgbArray[0];
    imgData.data[offset+1] = rgbArray[1];
    imgData.data[offset+2] = rgbArray[2];
    imgData.data[offset+3] = 255;
}
function renderHorizontalLine(imgData, x, y, length, rgbArray) {
    for (var i=0; i<length; i++) {
        renderDot(imgData, x+i, y, rgbArray);
    }
}
function renderVerticalLine(imgData, x, y, length, rgbArray) {
    for (var i=0; i<length; i++) {
        renderDot(imgData, x, y+i, rgbArray)
    }
}
function renderRect(imgData, x, y, width, height, rgbArray) {
    renderHorizontalLine(imgData, x, y, width, rgbArray);
    renderVerticalLine(imgData, x, y, height, rgbArray);
    renderHorizontalLine(imgData, x, y+height, width, rgbArray);
    renderVerticalLine(imgData, x+width, y, height, rgbArray);
    renderDot(imgData, x+width, y+height, rgbArray);
}
function removeDot(imgData, x, y) {
    var offset = getOffset(imgData, x, y);
    imgData.data[offset+3] = 0;
}
function getOffset(imgData, x, y) {
    return (y-1)*4*imgData.width + (x-1)*4;
}